<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>课程首页</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <style type="text/css">
        body {
            background-color: rgb(42, 119, 178);
        }

        .class-notification {
            width: 173px;
            height: 36px;
            background: rgba(194, 232, 255, 0.66);
            border-radius: 24px;
            padding: 0 5px;
            margin: 15px auto;
        }

        .teacher-avatar {
            width: 26px;
            height: 26px;
            min-width: 26px;
            margin-right: 7px;
            border-radius: 50%;
        }

        .class-notification-text {
            width: 140px;
            max-width: 140px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(25, 89, 126, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .system-notification {
            padding: 0 19px 0 9px;
        }

        .system-notification-map {
            width: 37px;
            height: 33px;
            min-width: 37px;
            margin-right: 9px;
        }

        .system-notification-content {
            height: 33px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.85);
            line-height: 42px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .course-background {
            height: auto;
            padding: 0 10px;
            background: url("../../image/ui/bg_6.png");
            background-size: 100% 213px;
            background-repeat: repeat-y;
            flex-wrap: wrap;
        }

        .course-item {
            position: relative;
            width: 33.333%;
            height: 213px;
            padding-top: 39px;
        }

        .course-cover {
            display: block;
            width: 100px;
            height: 134px;
            margin: 0 auto;
        }

        .course-semester {
            height: 40px;
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 40px;
            text-align: center;
        }

        .translucent-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .lock-picture {
            width: 50px;
            height: 50px;
        }

        .relative {
            position: relative;
        }

        .course-item-pic {
            display: block;
            width: 100px;
            height: 134px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <carousel type="1" :timestamp="timestamp"></carousel>
        <div class="class-notification" v-show="module2.retData.count > 0" data-flex="main:justify cross:center"
            @click="classInfoFn(module2.retData)">
            <div class="teacher-avatar">
                <img :src="module2.retData.icon" alt="">
            </div>
            <div class="class-notification-text">
                {{ '老师新发布了' + module2.retData.count  +'条消息' }}
            </div>
        </div>
        <div class="system-notification" v-show="module3.retData.title !== ''" data-flex="cross:center"
            @click="systemInfoFn(module3.retData)">
            <div class="system-notification-map">
                <img src="../../image/ui/notice.png" alt="">
            </div>
            <div class="system-notification-content">
                {{ module3.retData.title }}
            </div>
        </div>
        <div class="course-background" v-show="module4.retData.length > 0 && module4.retData[0].id != ''" data-flex>
            <div class="course-item" v-for="item in module4.retData">
                <div class="course-cover">
                    <div class="relative">
                        <img class="course-item-pic" :src="item.coursePic" @click="courseItemFn(item)" alt="">
                        <div class="translucent-background" v-if="item.materialIfUse == 2"
                            data-flex="main:center cross:center" @click.stop="unlock(item)">
                            <div class="lock-picture">
                                <img src="../../image/ui/lock.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="course-semester">
                    {{ item.courseName }}
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/component/carousel.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        fnInit();
        api.addEventListener({
            name: 'loginStatus'
        }, function () {
            load();
        });
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                timestamp: new Date().getTime(),
                module2: {
                    title: '班级公告',
                    path: 'class/notices',
                    api: 'clsClass/findStudentNoticeStatus',
                    param: {
                        // 学生类型
                        'memberType': '1'
                    },
                    retData: {
                        // 学生未读公告数
                        count: 0,
                        // 班级名称
                        classesName: '',
                        // 老师头像
                        icon: '',
                        // 班级id
                        classesId: ''
                    }
                },
                module3: {
                    title: '消息详情',
                    path: 'teacher/info_detail',
                    api: 'apiAppMessage/findUserMessageList',
                    param: {
                        // 消息类型 01系统消息
                        'messageBigTypeCodes': '01',
                        'messageSmallTypeCodes': '1',
                        'pageNo': 1,
                        'pageSize': 1
                    },
                    retData: {
                        // 消息类型code
                        messageTypeCode: '',
                        // 是否已读
                        ifRead: '',
                        // 消息标题
                        title: '',
                        // 读取时间
                        readTime: '',
                        // 消息创建时间
                        createDate: '',
                        // 消息id
                        id: ''
                    }
                },
                module4: {
                    title: '课程详情',
                    path: 'course1/course_list',
                    api: 'course/findIndexCourseList',
                    param: {},
                    retData: [
                        {
                            // 是否解锁
                            materialIfUse: '',
                            // 课程id
                            id: '',
                            // 课程名称
                            courseName: '',
                            // 缩略图
                            coursePic: '',
                            // 标签
                            courseLable: '',
                            // 详情描述
                            courseDetail: '',
                            // 排序
                            courseSort: '',
                            // 课程父id
                            courseParentId: '',
                            // 课程产品ID
                            courseProductId: ''
                        }
                    ]
                }
            }
        });
        load();
    }

    function load() {
        getPageData();
        // fnAddHeaderRefreshingEvent(function () {
        //     vm.timestamp = new Date().getTime();
        //     console.error(vm.timestamp);
        //     getPageData();
        // });
    }

    function getPageData() {
        if (USER.Get('memberType', true) == 1) {
            getModule2();
        }
        getModule3();
        getModule4();
    }

    // 获取课程
    function getModule4() {
        var params = vm.module4.param;
        var url = vm.module4.api;
        $S.POST(url, params, function(ret) {
            if(ret.status == 200) {
                api.refreshHeaderLoadDone();
                vm.module4.retData = ret.data.listData;
            }
        });
    }

    // 获取班级公告未读数量
    function getModule2() {
        var params = vm.module2.param;
        var url = vm.module2.api;
        $S.POST(url, params, function(ret) {
            if(ret.status == 200) {
                api.refreshHeaderLoadDone();
                vm.module2.retData = ret.data;
            }
        });
    }

    // 获取系统公告
    function getModule3() {
        var url = vm.module3.api;
        var params = vm.module3.param;
        $S.POST(url, params, function(ret) {
            if(ret.status == 200) {
                api.refreshHeaderLoadDone();
                if (ret.data.listData.length > 0) {
                    vm.module3.retData = ret.data.listData[0];
                }
            }
        });
    }

    // 点击后即视为已读,变更公告状态,并跳转到班级公告页面
    function classInfoFn(param) {
        if (userIsLogin()) {
            var params = {
                'classesId': USER.Get('classId', true)
            };
            var url = 'clsClass/updateStudentNoticeStatus';
            $S.POST(url, params, function (ret) {
                if (ret.status == 200) {
                    fnOpenPublicWin(
                        vm.module2.title,
                        vm.module2.path,
                        {
                            classesId: params.classesId
                        }
                    );
                    getModule2();
                }
            });
        }
    }

    // 系统消息
    function systemInfoFn(param) {
        if (userIsLogin()) {
            fnOpenPublicWin(
                vm.module3.title,
                vm.module3.path,
                {
                    messageInfoId: param.id
                }
            )
        }
    }

    // 课程
    function courseItemFn(param) {
        if (userIsLogin()) {
            fnOpenPublicWin(
                vm.module4.title,
                vm.module4.path,
                {
                    isBtn: false,
                    btnName: '全部下载',
                    headerFn: 'headerFn',
                    id: param.id
                }
            )
        }
    }

    // 课程解锁
    function unlock(param) {
        if (userIsLogin()) {
            fnOpenFrame({
                name: 'unlock',
                url: './unlock.html',
                pageParam: {
                    id: param.id,
                    courseName: param.courseName,
                    frmName: api.frameName
                }
            });
        }
    }
</script>

</html>